<template>
  <div>
    <div class="container">
      <div class="wrapper">
        <el-breadcrumb
          class="product-breadcrumb"
          separator=">"
        >
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path: `/category/${goodsDetails.categories[1]?.id}`}">{{ goodsDetails.categories[1]?.name }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path: `/category/sub/${goodsDetails.categories[0]?.id}`}">{{ goodsDetails.categories[0]?.name }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ goodsDetails.name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 商品信息 -->
        <div class="goods-info">
          <!-- 图片 -->
          <div class="goods-media">
            <div class="goods-img">
              <div class="goods-big-img">
                <zoomer
                  class="goods-detail-zoomer"
                  :img-src="defaultImg"
                />
                <!-- <img :src="defaultImg" alt=""> -->
                <div
                  class="goods-big-img-mask"
                >
                  <div
                    :class="defaultImg === p ? 'defaultImg' : ''"
                    v-for="p in goodsDetails.mainPictures"
                    :key="p"
                    @mouseenter="changeMainPictures(p)"
                  >
                    <img :src="p" alt="">
                  </div>
                </div>
              </div>
            </div>
            <div class="goods-sales">
              <div>
                <p>销量人气</p>
                <p>200+</p>
                <p>销量人气</p>
              </div>
              <div>
                <p>商品评价</p>
                <p>400+</p>
                <p>查看评价</p>
              </div>
              <div>
                <p>收藏人气</p>
                <p>600+</p>
                <p>收藏商品</p>
              </div>
              <div>
                <p>品牌信息</p>
                <p>苏宁电器</p>
                <p>品牌主页</p>
              </div>
            </div>
          </div>
          <!-- 右侧规格 -->
          <div class="goods-spec">
            <p class="goods-spec-name">{{ goodsDetails.name }}</p>
            <p class="goods-spec-desc">{{ goodsDetails.desc }}</p>
            <p class="goods-spec-price">
              <span>￥{{ defaultPrice }}</span>
              <span>￥{{ defaultOldPrice }}</span>
            </p>
            <div class="goods-serve">
              <div>
                <span>促销</span>
                <span>12月好物放送，App领券购买直降120元</span>
              </div>
              <div>
                <span>配送</span>
                <span>
                  至
                  <div style="display: inline-block">
                    <elui-china-area-dht v-model="userAdder" />
                  </div>
                </span>
              </div>
              <div>
                <span>服务</span>
                <span>
                  <span class="point">•</span>
                  无忧退货
                </span>
                <span class="serve-color">

                  <span class="point">•</span>
                  快速退款
                </span>
                <span class="serve-color">
                  <span class="point">•</span>
                  免费包邮
                </span>
                <span class="serve-color-more">
                  了解详情
                </span>
              </div>
            </div>
            <!-- 规格 div 写法-->
            <div
              class="goods-sku"
              v-for="(spec, i) in goodsDetails.specs"
              :key="i"
            >
              <div class="spec-name">{{ spec.name }}</div>
              <div class="box">
                <div
                  v-for="(d, j) in spec.values"
                  :key="j"
                  :class="spec.disabled[j] ? 'click-pass' : 'click-ban'"
                  @click="spec.disabled[j] ? onChangePrice(spec, d, i) : ''"
                >
                  <div
                    :class="specChecked[i]?.valueName !== d.name ? 'goods-sku-num ' : 'goods-sku-num border'"
                    v-if="d.picture === null"
                  >
                    {{ d.name }}
                  </div>
                  <div
                    v-else
                    :class="specChecked[i]?.valueName !== d.name ? 'goods-sku-img' : 'goods-sku-img color'"
                  >
                    <img :src="d.picture" alt="">
                  </div>
                </div>
              </div>
            </div>
            <!-- 表单写法 -->
            <!-- <el-form>
              <el-form-item
                v-for="(_, i) in filter"
                :key="goodsDetails.specs[i].id"
                :label="goodsDetails.specs[i].name"
              >
                <el-radio-group
                  v-model="filter[i].value"
                  @change="onFilterChange"
                >
                  <el-radio
                    v-for="(value, j) in goodsDetails.specs[i].values"
                    :key="value.name"
                    :label="`${goodsDetails.specs[i].name}:::${value.name}:::${i}:::${j}`"
                    :disabled="filter[i].disabled[j]"
                  >
                    <div :class="specChecked[i]?.valueName === value.name ? 'goods-sku-num border' : 'goods-sku-num'" v-if="value.picture === null">
                      {{ value.name }}
                    </div>
                    <div :class="specChecked[i]?.valueName === value.name ? 'goods-sku-img border' : 'goods-sku-img'" v-else>
                      <img :src="value.picture" alt="">
                    </div>

                  </el-radio>

                </el-radio-group>
              </el-form-item>
            </el-form> -->
            <div class="goods-num">
              <div>数量</div>
              <el-input-number v-model="num" :min="1" :max="10"/>
            </div>
            <div class="goods-btn">
              <button>加入购物车</button>
            </div>
          </div>
        </div>
        <!-- 同类商品推荐 -->
        <div class="goods-relevant">
          <div class="header">
            同类商品推荐
          </div>
          <div class="carousel" v-if="goodsRelevant.length > 0">
            <el-carousel
              indicator-position="outside"
              :autoplay="false"
              arrow="always"
              trigger="click"
            >
              <el-carousel-item v-for="item in goodsRelevant" :key="item.id">
                <div class="carousel-card">
                  <div v-for="sub in item" :key="sub.id" class="carousel-card-item" @click="onGoDetail(sub.id)">
                    <div>
                      <img :src="sub.picture" alt="">
                    </div>
                    <div class="carousel-card-name">{{ sub.name }}</div>
                    <div class="carousel-card-price">￥{{ sub.price }}</div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>

        </div>
        <!-- 商品详情 -->
        <div class="goods-footer">
          <div class="goods-left-container">
            <div class="goods-article">
              <div class="goods-article-header">
                <div @click="onChangePage('first')" >
                  <span :class="page === 'first' ? 'border' : ''">商品详情</span>
                </div>
                <div @click="onChangePage('second')">
                  <span :class="page === 'second' ? 'border' : ''">商品评价</span>
                  <span class="comment-num">(0)</span>
                </div>
              </div>
              <div
                v-if="page === 'first'"
                class="goods-article-content"
              >
                <div class="product">
                  <div v-for="item in goodsDetails.details?.properties" :key="item" class="item">
                    <div>{{ item.name }}</div>
                    <div>{{ item.value }}</div>
                  </div>
                </div>
                <img :src="p" alt="" v-for="p in goodsDetails.details?.pictures" :key="p">
              </div>
              <div
                v-else
                class="goods-article-comment"
              >
                <div class="list"></div>
              </div>

            </div>
            <!-- 注意事项 -->
            <div class="goods-warn">
              <h3>注意事项</h3>
              <p>• 购买运费如何收取？</p>
              <p>单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费)</p>
              <br>
              <p>• 使用什么快递发货?</p>
              <p>默认使用顺丰快递发货(个别商品使用其他快递)</p>
              <p>配送范围覆盖全国大部分地区(港澳台地区除外）</p>
              <br>
              <p>• 如何申请退货?</p>
              <p>1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；</p>
              <p>2.内裤和食品等特殊商品无质量问题不支持退货；</p>
              <p>3.退货流程： 确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；</p>
              <p>4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。</p>
            </div>
          </div>
          <!-- 热榜 -->
          <div class="goods-aside">
            <div class="goods-hot">
              <h3>24小时热销榜</h3>
              <div class="goods-hot-card" v-for="hot in hotRank" :key="hot.id" @click="onGoDetail(hot.id)">
                <img :src="hot.picture" alt="">
                <div class="goods-hot-name">{{ hot.name }}</div>
                <div class="goods-hot-desc">{{ hot.desc }}</div>
                <div class="goods-hot-price">￥{{ hot.price }}</div>
              </div>
            </div>
            <div class="goods-hot">
              <h3>周热销榜</h3>
              <div class="goods-hot-card" v-for="hot in weekRank" :key="hot.id" @click="onGoDetail(hot.id)">
                <img :src="hot.picture" alt="">
                <div class="goods-hot-name">{{ hot.name }}</div>
                <div class="goods-hot-desc">{{ hot.desc }}</div>
                <div class="goods-hot-price">￥{{ hot.price }}</div>
              </div>
            </div>
          </div>
        </div>

        <heihei @select="onSelect">
          <xixi value="1">1</xixi>
          <xixi value="2">2</xixi>
          <xixi value="3">3</xixi>
        </heihei>


      </div>

    </div>
  </div>
</template>

<script setup>
import { useStore } from 'vuex';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
import { ref } from 'vue';
import { EluiChinaAreaDht } from 'elui-china-area-dht';
// import { EluiChinaAreaDhtData } from 'elui-china-area-dht/dist/data';
import Zoomer from 'zoomer-yin';
import Heihei from '../../components/heihei/index.vue';
import Xixi from '../../components/heihei/xixi.vue';
// import Zoomer from '@/components/zoomer/index.vue';
const chinaData = new EluiChinaAreaDht.ChinaArea().chinaAreaflat;

function onSelect(v) {
  console.log(v);
}

const userAdder = ref(['110000', '110100', '110101']);
const num = ref(1);

const page = ref('first');

// 点击切换为商品评价
function onChangePage(val) {
  page.value = val;
}

const store = useStore();
const route = useRoute();
const router = useRouter();

// 初始默认价格
const defaultOldPrice = ref();
const defaultPrice = ref();


// 商品详情
const goodsDetails = ref({ categories: [] });
// 同类商品推荐
const goodsRelevant = ref([]);
// 默认图片
const defaultImg = ref();
const hotRank = ref([]);
const weekRank = ref([]);
const filter = ref([]);
const skusId = ref('');
// const goodsDetails = computed(() => store.state.goods.goodsDetails);

const specChecked = ref([]);

// function getSkus() {
//   // 商品参数选择后获取对应的skus
//   for (let i = 0; i < goodsDetails.value.skus.length; i++) {
//     let isValue = true;
//     const item = goodsDetails.value.skus[i];
//     for (let j = 0; j < item.specs.length; j++) {
//       if (item.specs[j].name !== specChecked.value[j]?.name || item.specs[j].valueName !== specChecked.value[j]?.valueName) {
//         isValue = false;
//         break;
//       }
//     }
//     if (isValue) {
//       return item;
//     }
//   }
// }
// 封装切换价格函数
function setSkusPrice() {
  // 商品参数选择后设置新的价格和id
  for (let i = 0; i < goodsDetails.value.skus.length; i++) {
    let isValue = true;
    const item = goodsDetails.value.skus[i];
    for (let j = 0; j < item.specs.length; j++) {
      if (item.specs[j].name !== specChecked.value[j]?.name || item.specs[j].valueName !== specChecked.value[j]?.valueName) {
        isValue = false;
        break;
      }
    }
    if (isValue) {
      defaultOldPrice.value = item.oldPrice;
      defaultPrice.value = item.price;
      skusId.value = item.id;
      return item;
    }
  }
}

async function init(route) {
  await store.dispatch('goods/updateGoodsDetails', route.params.id); // 商品详情
  const detailRes = await computed(() => store.state.goods.goodsDetails);
  detailRes.value.specs = detailRes.value.specs.map((s) => ({
    ...s,
    disabled: s.values.map(() => true),
  }));
  goodsDetails.value = detailRes.value;

  // 默认选中第一张图片
  defaultImg.value = goodsDetails.value.mainPictures[0];

  // 设置初始默认价格
  defaultOldPrice.value = goodsDetails.value.oldPrice;
  defaultPrice.value = goodsDetails.value.price;
  // 商品同类推荐
  await store.dispatch('goods/updateGoodsRelevant', route.params.id);
  // 引用处理好的getters的同类推荐数据
  goodsRelevant.value = store.getters['goods/goodsRelevantGroup'];

  await store.dispatch('goods/updateHotRank', route.params.id); // 24小时热榜
  await store.dispatch('goods/updateWeekRank', route.params.id); // 周榜
  const hotRes = await computed(() => store.state.goods.hotRank);
  hotRank.value = hotRes.value;
  const weekRes = await computed(() => store.state.goods.weekRank);
  weekRank.value = weekRes.value;

  filter.value = goodsDetails.value.specs.map((s) => ({
    name: s.name,
    value: '',
    disabled: s.values.map(() => false),
  }));
}
init(route);
onBeforeRouteUpdate(init);
// const index = ref([]);

// 选中其中一个的时候 表单写法
function onFilterChange(v) {
  console.log('v>>>', v);
  // label: 颜色
  // name: 黑色
  const [label, vname, i, j] = v.split(':::');
  const { skus } = goodsDetails.value;

  // index.value = j;
  specChecked.value[i] = {
    name: label,
    valueName: vname,
  };
  setSkusPrice();


  // filter的数组项 { name, value, disabled }
  // name: 颜色 value: 黑色
  filter.value = filter.value.map((f, i) => {
    if (f.name === label) {
      return f;
    }

    // f.name: 尺码
    return {
      ...f,
      // i : 0, 1, 2
      disabled: goodsDetails.value.specs[i].values.map(({ name }) => {
        // name: 110cm
        return !skus.some((sku) =>
          sku.specs.some((spec) => spec.name === label && spec.valueName === vname) &&
          sku.specs.some((spec) => spec.name === f.name && spec.valueName === name));
      }),
    };
  });
}
// 选中其中一个的时候 普通div写法
function onChangePrice(spec, value, i) {
  specChecked.value[i] = {
    name: spec.name,
    valueName: value.name,
  };


  setSkusPrice();
  const { skus } = goodsDetails.value;
  goodsDetails.value.specs = goodsDetails.value.specs.map((f, i) => {
    if (f.name === spec.name) {
      return f;
    }
    return {
      ...f,
      disabled: goodsDetails.value.specs[i].values.map(({ name }) => {
        return skus.some((sku) =>
          sku.specs.some((item) => item.name === spec.name && item.valueName === value.name) &&
          sku.specs.some((item) => item.name === f.name && item.valueName === name));
      }),
    };
  });
}

// 鼠标悬停切换图片
function changeMainPictures(p) {
  defaultImg.value = p;
}
// // 初始默认价格
// defaultOldPrice.value = goodsDetails.value.oldPrice;
// defaultPrice.value = goodsDetails.value.price;


function onGoDetail(id) {
  router.push({
    name: 'product',
    params: {
      id,
    },
  });
}

</script>
<style lang="scss" scoped>
.container{
  background-color: #f5f5f5;
  .wrapper{
    box-sizing: border-box;
    padding: 25px 0;
    width: 1240px;
    margin: 0 auto;
    height: 100%;
    .product-breadcrumb{
      margin-bottom: 20px;
      font-size: 14px;
      color: #999;
      .el-breadcrumb__item{
        color: #999;
      }
    }
    // 商品信息
    .goods-info{
      display: flex;
      width: 1240px;
      height: 600px;
      background: #fff;
      .goods-media{
        width: 580px;
        height: 600px;
        padding: 30px 50px;
        box-sizing: border-box;
        .goods-img{
          width: 480px;
          height: 400px;
          .goods-big-img{
            display: flex;
            .goods-detail-zoomer{
              width: 400px;
              height: 400px;
            }
            .goods-big-img-mask{
              display: flex;
              flex-direction: column;
              div{
                width: 64px;
                height: 64px;
                margin: 0 0 15px 12px;
                border: 2px solid #fff;
                img{
                  width: 64px;
                  height: 64px;
                }
                &:hover{
                  border: 2px solid #27ba9b;
                  transform: scale(0.95);
                }
              }
              .defaultImg {
                border: 2px solid #27ba9b;
                transform: scale(0.95);
              }
            }
          }

        }
        .goods-sales{
          width: 400px;
          height: 140px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          position: relative;
          div{
            width: 100px;
            text-align: center;
            font-size: 14px;
            p{
              margin: 0;
              margin-top: 10px;
            }
            & p:nth-child(1){
              color: #999;
            }
            & p:nth-child(2){
              color: #cf4444;
            }
          }
          div::before{
            position: absolute;
            content: '';
            display: block;
            top: 50px;
            width: 1px;
            height: 50px;
            background-color: #e5e5e5;
          }
          div:nth-child(1)::before{
            display: none;
          }
        }
      }
      .goods-spec{
        flex: 1;
        padding: 30px 30px 30px 0;
        box-sizing: border-box;
        .goods-sku-img{
          height: 50px;
          width: 50px;
          border: 1px solid #e4e4e4;
          margin-right: 6px;
          img{
            height: 50px;
            width: 50px;
          }
        }
        :deep(.el-form-item){
          margin-top: 16px;
          margin-left: 10px;
        }
        :deep(.el-form-item__label){
          padding: 0 16px 0 0 ;
        }
        :deep(.el-radio__input){
          display: none;
        }
        .goods-sku-num{
          border: 1px solid #e4e4e4;
          color: #666;
          height: 30px;
          line-height: 30px;
          text-align: center;
          padding: 0 20px;
          font-size: 14px;
          margin: 0  0 6px 0;
        }
        .border{
          border: 1px solid #27ba9b;
        }
        .goods-spec-name{
          font-size: 22px;
          margin: 0;
          padding-bottom: 10px;
        }
        .goods-spec-desc{
          font-size: 14px;
          color: #999;
          margin: 0;
          padding-bottom: 10px;
        }
        .goods-spec-price{
          margin: 0;
          padding-bottom: 10px;
          & span:nth-child(1){
            font-size: 22px;
            color: #cf4444;
            margin-right: 10px;
          }
          & span:nth-child(2){
            color: #999;
            text-decoration: line-through;
          }


        }
        .goods-serve{
          width: 500px;
          padding: 20px 10px 0;
          background: #f5f5f5;
          div{
            padding-bottom: 10px;
            :deep(.el-select){
              padding: 0;
              line-height: 0;
            }
            & span:nth-child(1){
              color: #999;
              font-size: 14px;
              margin-right: 16px;
            }
            & span:nth-child(2){
              color: #666;
              font-size: 14px;
            }
            span .point{
              color: #27ba9b;
              margin: 0;
            }
            .serve-color{
              color: #666;
              font-size: 14px;
              padding-left: 8px;
            }
            .serve-color-more{
              color: #27ba9b;
              font-size: 14px;
              padding-left: 8px;
            }
          }
        }
        .goods-sku{
          display: flex;
          padding: 20px 0 0 10px;
          align-items: center;
          .spec-name{
            width: 50px;
            font-size: 14px;
            color: #999;
          }
          .box{
            display: flex;
            flex-wrap: wrap;
            .goods-sku-num{
              border: 1px solid #e4e4e4;
              color: #666;
              height: 30px;
              line-height: 30px;
              text-align: center;
              padding: 0 20px;
              font-size: 14px;
              margin: 0  6px 6px 0;
            }
            .border{
              border: 1px solid #27ba9b;
            }
            .disable{
              pointer-events: none;
            }

            // .goods-sku-img{
            //   width: 50px;
            //   height: 50px;
            //   border: 1px solid #e4e4e4;
            //   margin: 0 10px 5px 0;
            //   img{
            //     width: 50px;
            //     height: 50px;
            //   }
            // }
            .color{
              border: 1px solid #27ba9b;
            }
          }
        }
        .goods-num{
          display: flex;
          padding: 20px 0 0 10px;
          & div:nth-child(1){
            width: 50px;
            line-height: 30px;
            color: #999;
            font-size: 14px;
          }
        }
        .goods-btn{
          margin-top: 20px;
          button{
            width: 180px;
            height: 50px;
            padding: 1px 6px;
            background: #27ba9b;
            border: none;
            color: #fff;
            border-radius: 4px;
            font-size: 18px;
          }
        }
      }
    }
    // 同类商品推荐
    .goods-relevant{
      width: 1240px;
      height: 460px;
      margin-top: 20px;
      background: #fff;
      .header{
        height: 80px;
        line-height: 80px;
        padding: 0 20px;
        font-size: 20px;
      }
      .carousel{
        height: 380px;
        :deep(.el-icon){
          color: #ddd;
          font-size: 36px;
        }
        .carousel-card{
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 0 40px;

          .carousel-card-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 240px;
            height: 290px;
            cursor: pointer;
            img{
              width: 190px;
              height: 190px;
            }
            .carousel-card-name{
              width: 200px;
              box-sizing: border-box;
              padding-top: 16px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .carousel-card-price{
              box-sizing: border-box;
              padding-top: 16px;
              color: #cf4444;
            }
          }
        }
      }
    }
    // 详情
    .goods-footer{
      margin-top: 20px;
      background: #f5f5f5;
      display: flex;
      // 左侧商品详情
      .goods-left-container{
        background: #f5f5f5;
        .goods-article{
          background: #fff;
          box-sizing: border-box;
          width: 940px;
          margin-right: 20px;
          padding: 20px 40px;
          // outline: 1px solid red;
          .goods-article-header{
            display: flex;
            border-bottom: 1px solid #f5f5f5;
            div{
              height: 69px;
              line-height: 69px;
              box-sizing: border-box;
              font-size: 18px;
              padding: 0 40px;
              & span{
                padding: 10px 0;
                cursor: pointer;
              }
              &:nth-child(1){
                border-right: 1px solid #f5f5f5;
              }
              .border{
                border-bottom: 2px solid #27ba9b;
              }
              .comment-num{
                color: #cf4444;
                margin-left: 10px;
              }
            }
          }
          .goods-article-content{
            padding: 40px;
            font-size: 0;
            img{
                width: 860px;
            }
            .product{
              display: grid;
              grid-template-columns: 1fr 1fr;
              margin-bottom: 30px;
              .item{
                display: flex;
                padding: 6px 0;
                & div:nth-child(1){
                  width: 100px;
                  color: #999;
                  font-size: 14px;
                }
                & div:nth-child(2){
                  flex: 1;
                  color: #666;
                  font-size: 14px;
                }
              }

            }
          }
          .goods-article-comment{
            background: #fff;
            .list{
              height: 530px;
            }
          }
        }
        // 注意事项
        .goods-warn{
          width: 940px;
          box-sizing: border-box;
          margin-top: 20px;
          padding-bottom: 40px;
          background: #fff;
          h3{
            box-sizing: border-box;
            font-size: 18px;
            color: #333;
            height: 70px;
            line-height: 70px;
            padding-left: 50px;
            margin-bottom: 10px;
            font-weight: 400;
            border-bottom: 1px solid #e4e4e4;
          }
          p{
            box-sizing: border-box;
            font-size: 14px;
            color: #333;
            padding: 0 25px;
          }
        }
      }

      // 右侧热榜
      .goods-aside{
        width: 280px;
        background: #f5f5f5;
        .goods-hot{
          h3{
            margin: 0;
            height: 70px;
            background: #e26237;
            color: #fff;
            font-size: 18px;
            line-height: 70px;
            padding-left: 25px;
            margin-bottom: 10px;
            font-weight: 400;
          }
          .goods-hot-card{
            cursor: pointer;
            background: #fff;
            padding: 20px 30px;
            margin-bottom: 10px;
            box-sizing: border-box;
            text-align: center;
            img{
              width: 200px;
              height: 200px;
            }
            .goods-hot-name{
              padding-top: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .goods-hot-desc{
              padding-top: 10px;
              font-size: 14px;
              color: #999;
            }
            .goods-hot-price{
              padding-top: 10px;
              font-size: 20px;
              color: #cf4444;
            }
          }
        }
      }
    }

  }
}
:deep(.el-carousel__button) {
  display: block;
  opacity: .1;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #27ba9b;
  cursor: pointer;
}
:deep(.el-carousel__arrow){
  background: transparent;
}
.click-pass {
  cursor: pointer;
}
.click-ban {
  //pointer-events: none;
  cursor: not-allowed;
}
</style>
